HandStack 프론트엔드 완성

폰트·테마·스타일 범위를 정하고, 번들 변경 전후의 로딩 결과를 비교합니다.

QCN

1. 웹 폰트, 아이콘 적용하기

  • 목표: 웹 페이지의 시각적인 품질을 높여 사용성을 개선합니다.

"웹 폰트와 아이콘은 웹 페이지의 '얼굴'과 '표정'을 담당해요. 예쁜 폰트와 센스 있는 아이콘으로 우리 앱을 더 매력적으로 만들 수 있죠."

QCN

웹 폰트 적용 실습 (1/2)

  • Google Fonts와 같은 서비스를 이용해 원하는 글꼴을 쉽게 적용할 수 있습니다.

  • <link> 태그를 index.html에 추가하는 방법

      1. Google Fonts 사이트에서 원하는 폰트 선택
      1. <link> 코드를 복사하여 index.html 파일의 <head> 태그 안에 붙여넣기
      1. CSS 파일에서 font-family 속성으로 지정
QCN

웹 폰트 적용 실습 (2/2)

<!-- client/index.html -->
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
</head>

/* client/src/assets/css/main.css */
body {
  font-family: 'Noto Sans KR', sans-serif;
}
QCN

아이콘 라이브러리 적용 실습 (1/2)

  • Font Awesome과 같은 라이브러리를 사용하면 간단한 태그로 아이콘을 표시할 수 있습니다.

  • CDN을 이용한 방법

      1. Font Awesome의 CDN 주소를 index.html에 <script> 태그로 추가합니다.
      1. 원하는 아이콘의 클래스를 <i> 태그에 적용합니다.
QCN

아이콘 라이브러리 적용 실습 (2/2)

<!-- client/index.html -->
<head>
  ...
  <script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
</head>

<!-- 컴포넌트 템플릿 -->
<button type="button">
  <i class="fas fa-search"></i> 조회
</button>
QCN

CSS 프레임워크란? (1/2)

  • 미리 정의된 CSS 클래스 모음으로, 일관성 있는 UI를 빠르게 만들 수 있도록 도와줍니다.

  • 유틸리티 우선 (Utility-First)

    • 작은 단위의 스타일 클래스를 조합하여 UI를 구성합니다. (예: Master CSS, Tailwind CSS)
    • <div class="p-4 bg-blue-100 rounded">...</div>
QCN

CSS 프레임워크란? (2/2)

  • 컴포넌트 기반 (Component-Based)

    • 미리 디자인된 버튼, 카드 등의 컴포넌트를 사용합니다. (예: Bootstrap)
    • <button class="btn btn-primary">Primary Button</button>

  • HandStack에서는 Libman을 통해 이러한 프레임워크를 쉽게 설치하고 관리할 수 있습니다.

QCN

2. 나만의 테마/스타일 적용하기

  • 목표: 앱의 기본 UI에 자신만의 색상, 폰트 등을 적용하여 개성을 표현합니다.

"이제 우리 앱은 기능뿐만 아니라 '겉모습'도 여러분의 손으로 직접 만들어갈 수 있게 되었어요! 나만의 개성을 담은 앱을 만들어 보세요."

QCN

전역 스타일과 CSS 변수 (1/2)

  • 공통 CSS에 전역 스타일을 둡니다. client/src/assets/css/main.css는 별도 프론트엔드 예시 경로이며 HandStack의 고정 디렉토리가 아닙니다.

  • CSS 변수를 사용하면 앱의 핵심 색상, 폰트 등을 한 곳에서 관리하여 테마 변경이 쉬워집니다.

  • 핸즈온

      1. main.css에 :root 를 사용하여 전역 변수 선언
      1. var(--변수명) 으로 각 요소에 색상, 폰트 등 적용
      1. 방명록 목록의 배경색, 글씨체를 바꿔보기
QCN

전역 스타일과 CSS 변수 (2/2)

/* client/src/assets/css/main.css */
:root {
  --primary-color: #007bff;
  --text-color: #212529;
  --background-color: #ffffff;
  --base-font-size: 16px;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
  font-size: var(--base-font-size);
}
QCN

잠깐, 구분해 보기

파일을 하나로 합치면 첫 화면도 항상 빨라질까요?

QCN

스타일 범위: 일반 화면과 Vue 비교 (1/2)

  • 일반 HandStack HTML 화면은 화면별 루트 클래스·ID로 선택자 범위를 제한합니다.

  • 별도 Vue 프로젝트에서는 <style scoped>를 사용할 수 있습니다. 아래 Guestbook.vue는 비교 예제입니다.

  • 이는 다른 컴포넌트와의 스타일 충돌을 막아주어 유지보수를 쉽게 만듭니다.

  • 핸즈온

    • 방명록 컴포넌트(Guestbook.vue)에 스코프 스타일을 적용하여 디자인 변경
QCN

스타일 범위: 일반 화면과 Vue 비교 (2/2)

<!-- GuestbookItem.vue -->
<template>
  <div class="guestbook-item">...</div>
</template>

<style scoped>
/* 이 스타일은 GuestbookItem 컴포넌트 안에서만 적용됩니다. */
.guestbook-item {
  padding: 1rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  border-left: 4px solid var(--primary-color);
}
</style>
QCN

3. 프론트엔드 성능 최적화 맛보기

  • 목표: 코드 번들링 개념을 이해하고 웹 페이지의 초기 로딩 속도를 개선하는 방법을 알아봅니다.

번들링은 파일 병합, 압축은 전송 크기 감소, 분할은 필요한 코드의 선택적 로딩입니다. 서로 같은 기능이 아닙니다.

QCN

코드 번들링과 분할 (Splitting) (1/2)

  • 왜 성능 최적화가 중요한가?

    • 사용자 경험 향상: 로딩이 빠른 웹은 사용자의 만족도를 높입니다.
    • 검색 엔진 최적화(SEO): 로딩 속도는 검색 순위에도 영향을 미칩니다.

  • 문제점

    • 모든 JavaScript, CSS 코드를 하나의 큰 파일로 만들면 초기 로딩이 매우 느려집니다.
QCN

코드 번들링과 분할 (Splitting) (2/2)

  • 해결책: 코드 분할 (Code Splitting)
    • 페이지(라우트)나 기능 단위로 코드를 나누어, 필요한 시점에만 해당 코드를 불러옵니다.
QCN

HandStack에서 번들링 적용하기 (1/3)

  • wwwroot의 gulpfile.js(scripts, styles, bundle)는 JS/CSS를 syn.bundle.js·syn.bundle.css와 .min.*로 병합·압축합니다. 이것만으로 화면별 코드 분할이 적용되지는 않습니다.

  • 배포 시점에는 bundling CLI(.NET 10 도구)로 대상 파일/디렉터리를 압축(compress, compresspath)하거나 bundleconfig.json 기준으로 일괄 처리(artifact)할 수 있습니다.

QCN

HandStack에서 번들링 적용하기 (2/3)

  • 핸즈온
      1. 터미널에서 dotnet run --project 4.Tool/CLI/bundling -- compresspath --path=wwwroot --keep=true 실행
      1. 대상 디렉터리에 생성된 .min.* 파일 확인
      1. Chrome 개발자 도구(F12)의 Network 탭에서 로딩되는 파일들을 확인
# 저장소 루트에서 실행
dotnet run --project 4.Tool/CLI/bundling -- compresspath --path=wwwroot --keep=true
QCN

HandStack에서 번들링 적용하기 (3/3)

  • 위 명령을 실행하면 대상 경로의 HTML/JS/CSS가 압축된 .min.* 파일로 생성됩니다.
QCN

정리 및 다음 단계 (1/3)

  • 무엇을 배웠나요?
    • 웹 폰트와 아이콘으로 앱의 시각적 완성도 높이기
    • CSS 변수와 스코프 스타일로 나만의 디자인 적용하기
    • 코드 번들링을 통한 프론트엔드 성능 최적화 개념 이해하기
QCN

정리 및 다음 단계 (2/3)

  • 다음 단계
    • 더 복잡하고 다양한 UI 컴포넌트 만들어보기
    • HandStack의 syn.controls.js 라이브러리 깊게 파보기
    • 본격적인 백엔드 API 연동 심화 학습
QCN

정리 및 다음 단계 (3/3)

  • 적용 전후 같은 조건의 Network 기록을 저장해 개선 여부를 판단합니다.
QCN

화면 마무리의 기준

  • 폰트·아이콘의 로딩과 대체 표시를 확인합니다.
  • 전역 CSS 변수와 화면별 스타일 범위를 구분합니다.
  • 번들·압축·분할의 효과를 전송량과 로딩 시간으로 비교합니다.
QCN

발표: 첫 화면의 목표를 말한 뒤 핵심 개념과 예제로 진행합니다. 확인 질문 뒤에는 답할 시간을 주고, 마지막 완료 기준을 남겨 질문을 받습니다. 발표 구성 참고: MIT OpenCourseWare, Patrick Winston, How to Speak (2018), https://ocw.mit.edu/courses/res-tll-005-how-to-speak-january-iap-2018/pages/how-to-speak/

질문 후 잠시 기다립니다. 답이 없으면 앞에서 본 예제를 다시 가리킵니다. 확인할 답: 요청 수는 줄어도 전송량이 커질 수 있습니다. 캐시와 필요한 리소스를 실제 Network 기록으로 비교합니다. 다음 주제로 넘어가기 전에 차이를 청중의 표현으로 한 번 확인합니다.

질문을 받는 동안 이 확인 기준을 화면에 남깁니다. 청중이 자신의 업무에 적용할 다음 행동 하나를 고르게 합니다.